<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>物流详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
    <!-- 电话号码不被显示为超链接 -->
    <meta content="telephone=no" name="format-detection" />
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <link rel="stylesheet" href="./static/css/animate.css">
    <link rel="stylesheet" href="./static/css/com.css">
    <link rel="stylesheet" href="./static/css/wuliu.css">
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=dd7c4103516c0d028792069e2520757e"></script>
</head>

<body>
    <div id='app'>

        <hea-controll :icon_json='heaIconJson' @right1='right1' @right2='right2'></hea-controll>

        <!-- 订单号展示 -->
        <div class='order-num-wrap'>
            <div class='order-num-left'>
                <img @click='history.back()' src="./static/img/icon-left-order.png" width="60px" height="60px">
                <img src="./static/img/download-logo.png" width="60px" height="60px">
                <span>订单号：</span>
                <span>123456</span>
            </div>
            <img @click='openKefu' src="./static/img/icon-white-kefu.png" width="40px" height="40px">
        </div>
        <!-- 订单号展示 -->

        <!-- 地图 -->
        <div class='map-wrap' id='map'></div>
        <!-- 地图 -->

        <!-- 透明fixed图层 -->
        <div class='scroll-wrap'>

            <!-- 用于滚动的层 -->
            <div class='scroll-div' ref='scrollDiv'>

                <!-- 显示物流的块 可以显示更多物流 -->
                <div :class='{"show-wuliu":true,"no-wuliu":offPosi}' v-if='wuliuDataCopy.length' ref='showWuliu'>
                    <div class='time-type-div' v-for="(val,index) in wuliuDataCopy" :key='index'>
                        <div class='time-left'>
                            <p v-text='val.month'>09-23</p>
                            <p v-text='val.time'>13:00</p>
                        </div>
                        <div class='wuliu-info-right'>
                            <div class='dabge-wuliu' v-for="(info,infoIndex) in val.info" :key='infoIndex'>
                                <span v-text='info.state'>收</span>
                                <p v-text='info.title'>已牵手</p>
                                <p v-text='info.notice'>重庆事垫江想高昂真----迪斯科飞机啊，已经钱前收到后</p>
                            </div>
                        </div>
                    </div>

                    <!-- 时间分类数据大于2或者第一个数据里的详情信息大于2就可以查看更多物流 -->
                    <p class='like-more-wuliu' v-if='wuliuData.length&&(wuliuData.length>2||wuliuData[0].info.length>2)' @click='likeMoreWuliu'>
                        <span v-text='moreOr'>点击查看更多物流详情</span>
                        <img src="./static/img/icon-down.png" width="40px" height="40px">
                    </p>

                </div>
                <div v-else :class='{"show-wuliu":true,"no-wuliu":offPosi}'>
                    暂无物流信息
                </div>
                <!-- 显示物流的块 可以显示更多功能 -->

                <div class='show-tuijian-goods'>
                    <div :style="{'padding-top':offPosi?'150px':'200px'}" ref='tuijian'>

                        <!-- 底部推荐商品 -->
                        <div style="padding:20px 30px;">
                            <index-goods-title :font='goodsTitle'></index-goods-title>
                            <goods-info :goods_info='goodsInfo'></goods-info>
                        </div>
                        <!-- 底部推荐商品 -->

                    </div>
                </div>
            </div>
            <!-- 用于滚动的层 -->

        </div>
        <!-- 透明fixed图层 -->

    </div>
    <script src="./static/js/com.js"></script>
    <script src="./static/js/jquery-3.3.1.min.js"></script>
    <script src='./static/js/vue.min.js'></script>
    <script src="./component/com/header.js"></script>
    <script src="./component/com/goodsInfo.js"></script>
    <script src="./component/com/goodsTitle.js"></script>
    <script src="./static/js/vue-service-wuliu.js"></script>
    <script>
        setTimeout(function() {
            var map = new AMap.Map('map', {
                zoom: 11, //级别
                center: [116.397428, 39.90923], //中心点坐标
                viewMode: '3D' //使用3D视图
            });
        }, 500);
    </script>
</body>

</html>